/**
 Observable State(可观察状态)mobx允许你创建可观察的状态，
 你可以将对象、数组、类的实例甚至是普通变量标记为可观察的
 Observer(观察者) 这是一个可以自动响应状态变化的函数，
 通常这是一个React组件，但也可以是任何能够响应状态变化的函数
 npm install mobx  mobx-react-lite
 */
import { observable, action, computed, reaction,autorun } from 'mobx';
import { observer } from 'mobx-react-lite';
//把一个普通的对象编成一个可观察对象
const todo = observable({
    title: 'mobx',
    completed: false
});
//响应状态的变化 执行副作用
//第一个参数是一个计算函数，可以计算出一个值
//第二个参数就是副作用函数，当值 发生变化的时候会执行副作用函数
reaction(() => todo.title, (title) => {
    console.log('reaction.title', title)
});
//自动运行
autorun((reaction) => {
    console.log('autorun.reaction', reaction)
});
//调用observer方法可以创建一个观察者，用来观察可观察对象todo
//以后当todo发生变化的时候，组件会自动刷新
const TodoView = observer(({ todo }) => {
    //computed可以接收一个函数，函数会返回一个值,这个值就计值
    //因为在计算的时候用到了todo.title,所以以后当todo的title发生变化的时候，计算值也会更新
    const upperCaseTitle = computed(() => todo.title.toUpperCase())
    return (
        <div>
            <p> {todo.title}</p>
            <p> {upperCaseTitle.get()}</p>
        </div>
    )
});
function MobxApp() {
    //修改状态 使用action函数可以将你的函数或者说方法标记为动作
    //而只有动作才能修改状态
    //动作会修改状态，动作就是可以修改状态的方法，在 mobx中，只能通过动作来修改状态
    const changeTitle = action(() => todo.title = 'mobx2');
    return (
        <>
            <TodoView todo={todo} />
            <button onClick={changeTitle}>改变todo</button>
        </>
    )
}
export default MobxApp;